<template>
    <div>
        <el-skeleton animated :rows="8" :loading="data.isFisrt">
            <el-descriptions direction="vertical" :column="2" border>
                <el-descriptions-item label="跟进内容" :span="2">
                    <el-input type="textarea" v-model="data.request.content"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="跟进时间" width="50%">
                    <el-date-picker style="width:100%" v-model="data.request.date" type="date" placeholder="本次跟进时间" />
                </el-descriptions-item>
                <el-descriptions-item label="本次跟进地点">
                    <el-input v-model="data.request.location"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="是否转换为会员(转换则代表本次客户跟进成功)">
                    <el-switch v-model="data.request.isconvert"  @change="event.convert_change" class="ml-2"
                        inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        active-text="转换" inactive-text="不转换" />
                </el-descriptions-item>
                <el-descriptions-item label="预估成功率">
                    <el-slider @change="event.succscc_change" v-model="data.request.success" :step="10"
                        :show-stops="true" />
                </el-descriptions-item>
                <el-descriptions-item label="跟进结果">
                    <el-select :disabled="true" style="width:100%" v-model="data.request.result" placeholder="客户类别"
                        size="large"> 
                        <el-option v-for="item in data.result_list" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>

                <el-descriptions-item label="下次跟进时间">
                    <el-date-picker style="width:100%" v-model="data.request.next_time" type="date"
                        placeholder="约定下次跟进时间" />
                </el-descriptions-item>
                <el-descriptions-item label="操作">
                    <el-button @click="event.add" :disabled="!event.check()" type="primary">新增</el-button>
                </el-descriptions-item>
            </el-descriptions>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import type customer_Record_Add_Dto from '@/Dto/Request/customer/customer_Add_Record_Dto';
import { onMounted,reactive } from 'vue';
import dayjs from 'dayjs';
import { el, id, tr } from 'element-plus/es/locales.mjs';
import { get_Dictionary_ByKey } from '@/api/dic';
import { closeloading, startloading } from '@/utils/loading';
import AddCustomer from '@/views/customer/addCustomer.vue';
import { add_record } from '@/api/customer';
import Api_Code from '@/Dto/Response/Api_code';
import { msg } from '@/utils/msg';




const emit = defineEmits(['myclose']);

const data=reactive<customer_Record_Add_Dto>({
    request: {
        cid: sessionStorage.getItem("customer_id") || "",
        content: '',
        date: new Date(),
        result: '',
        location:'',
        success: 0,
        isconvert: false,
        next_time: ''
    },
    isFisrt: true,
    result_list: []
})


const event={
    convert_change(){
        if (data.request.isconvert) {
            data.request.result = data.result_list.find(e => e.value == "0")?.id;
            data.request.success = 100;
        } else {
            data.request.result = data.result_list.find(e => e.value == "1")?.id;
            data.request.success = 50;
        }
    },
    succscc_change(){
        if (data.request.success === 100) {
            data.request.result = data.result_list.find(e => e.value == "0")?.id;
            data.request.isconvert = true;
        } else {
            data.request.result = data.result_list.find(e => e.value == "1")?.id;
            data.request.isconvert = false;
        }
    },
   async add(){
        startloading();
        const res=await add_record({
            ...data.request,
            date:dayjs(data.request.date).format('YYYY-MM-DD'),
            nexttime: dayjs(data.request.next_time).format('YYYY-MM-DD'),
            isconvert: data.request.isconvert ? 1 : 0,
        })
        closeloading();
        if(res.code===Api_Code.ok){
            emit('myclose');
            msg(res)
        }else{
            msg(res)
        }

    },
    check(){
        if (data.request.content.trim().length === 0) {
            return false;
        }
        if (data.request.location.length === 0) {
            return false;
        }
        return true;
    }
}
const methods={
    async bind(){
        const res=await  get_Dictionary_ByKey({
            keys:['customer_record_result']
        })
        if (res.code === 0) {
            data.result_list = res.data;
        }
    }
}

onMounted(async()=>{
    await methods.bind();
    data.request.result = data.result_list[1].id;
    data.isFisrt = false;
})
</script>

<style scoped>

</style>